<template>
    <div style="height:100%;width:100%;">
        <div class="showCommentArea" style="border-bottom: 1px #e1d1d1 solid;">
            <span style="font-size: 20px;color: #463f3dd4;">消息通知</span>

        </div>
<!--            消息评论区域-->
        <div class="showCommentArea" style="min-height: 700px;max-height: 700px">
            <el-row style="width: 100%;height: 100%">
                <el-col :span="6" >
                    &nbsp;
                </el-col>
                <el-col :span="12" style="">
<!--                    内容展示-->
                    <el-row v-for="messageItem in messageItems" :key="messageItem.id" style="padding-top: 10px;border-bottom: 1px solid #755e5e59">
                        <el-col :span="3" style="margin-bottom: 5px">
                            <!--                         头像-->
                            <div style="display: flex;align-items: start;justify-content: center;height: 100%;">
                                <el-avatar v-if="messageItem.byUserAvatarUrl" :src="messageItem.byUserAvatarUrl" class="avatar"></el-avatar>
                                <el-avatar v-else icon="el-icon-user-solid"></el-avatar>

                            </div>
                        </el-col>
                        <el-col :span="21" style="margin-bottom: 5px;z-index: 2;position: relative;">
                            <!--                        展示评论-->
                            <div style="width: 100%;margin-bottom: 5px">
                                <!--                            用户nickname，评论时间-->
                                <div style="width: 100%;display: flex;flex-direction: row;font-size: 14px;color: #777888;">
                                    <span style="margin: 0 10px 0 0;">{{messageItem.byUserNickname}}({{messageItem.byUserRole}})</span>
                                    <span>{{messageItem.createTime | dateFormatFun(2)}}</span>
                                </div>
                                <div class="commentContentArea " >
                                    <span class="oneLine">{{messageItem.typeContent}}</span>
                                </div>
                                <!--                             评论内容-->
                                <div style="width: 100%;margin-top: 10px">
                                    <div style="width: 100%;text-align: left">
                                        <span>{{messageItem.content}}</span>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
<!--                    分页展示-->
                    <el-row style="margin-top: 20px;position: fixed;bottom: 41px;left: 41%;">
                        <el-col :span="24" class="pageAreaStyle">
                            <el-pagination
                                    @size-change="changePageSize"
                                    @current-change="changePageIndex"
                                    background
                                    :page-size="pageSize"
                                    :pager-count="5"
                                    layout="total, prev, pager, next, jumper"
                                    :total="totalMessagesNum">
                            </el-pagination>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>


        </div>


    </div>
</template>

<script>
    import {constants} from "@/common/constants";

    export default {
        name: "MessageInform",
        data(){
            return{
                messageItems:[],        //所有的消息通知
                totalMessagesNum:0,     //总的博客数目
                pageIndex:1,    //当前页序号
                pageSize:6,    //当前页面大小
                userId:(localStorage.getItem('user'))?JSON.parse(localStorage.getItem('user')).id:null, //当前的用户id

            }
        },
        created() {
            this.queryAllMessages();
            this.clearRedPot();

        },
        methods:{
            //调用父组件消除红点
            callParentClearRedPoint(){
                this.$emit("closeTopBarRedPointState");
            },
            //进入当前界面，所有的message都变为旧的，消除红点
            clearRedPot(){
                this.request.get("/index/message/clearRedPot",{
                    params:{
                        type:constants.messageType.comment,
                        userId:this.userId,
                    }
                }).then(res=>{
                    if (res.code=="200"){
                        this.callParentClearRedPoint();
                    }
                })
            },
            //改变分页中的页面大小
            changePageSize(newPageSize){
                this.pageSize=newPageSize;
                this.queryAllMessages();
            },
            //改变当前页的序号
            changePageIndex(newPageIndex){
                this.pageIndex=newPageIndex;
                this.queryAllMessages();
            },
            //查询所有的消息通知
            queryAllMessages(){
                this.request.get("/index/message/queryAllMessages",{
                    params:{
                        userId:this.userId,
                        orderByCreateTime: "desc",
                        pageIndex:this.pageIndex,
                        pageSize:this.pageSize,
                    }
                }).then(res=>{
                    if (res.code=="200"){
                        this.messageItems=res.data.messages;
                        this.totalMessagesNum=res.data.totalMessageNum;
                    }else {
                        this.messageItems=[];
                    }
                })
            }
        }


    }
</script>

<style scoped>

    .pageAreaStyle{
        width: 100%;
        text-align: center;
    }


    .commentContentArea{
        width: calc(100% - 20px);
        margin-top: 5px;
        height: 25px;
        background: rgba(140, 157, 151, 0.17);
        margin-right: 20px;
        color: #826a5fa6;
        font-size: 15px;
        padding: 5px;
        line-height: 25px;
    }

    /*超过两行省略号*/
    .oneLine{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        font-size: 15px;
        line-height: 20px;
    }


    .showCommentArea{
        width: calc(100% - 40px);
        height: 100%;
        padding:20px 20px;
    }
</style>